<template>
  <div>

    <sky-panel title="Css面向对象">
      <template v-slot:header>
        <span>此处只展出css面向对象规则 更多使用示例稍后</span>
      </template>
      <template v-slot:main>

        <div fz14 font-quaternary> 字体大小控制</div>
        <div fz18 font-primary> 字体大小控制</div>
        <div fz20 font-secondary decoration> 字体大小控制</div>
        <div fz24 font-quaternary decoration> 字体大小控制</div>
        <div fz32 font-quaternary> 字体大小控制</div>

        <div class="box-color">
          <div class="case-color" mt20></div>
        </div>

        <div class="box-color">
          <div class="case-color" mb20></div>
        </div>

        <div class="box-color">
          <div class="case-color" ml20></div>
        </div>

        <div class="box-color">
          <div class="case-color" mr20></div>
        </div>

        <div class="box-color" pt20>
          <div class="case-color"></div>
        </div>

        <div class="box-color" pb20>
          <div class="case-color"></div>
        </div>

        <div class="box-color" pl20>
          <div class="case-color"></div>
        </div>

        <div class="box-color" pb20>
          <div class="case-color"></div>
        </div>

        <div class="box-float" clearfix>
          <div class="case-float" fl></div>
          <div class="case-float" fr></div>
        </div>

      </template>
    </sky-panel>

    <sky-code-panel>
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
        <code class="html">

         &lt;div fz14 font-quaternary&gt; 字体大小控制&lt;/div&gt;
         &lt;div fz18 font-primary&gt; 字体大小控制&lt;/div&gt;
         &lt;div fz20 font-secondary decoration&gt; 字体大小控制&lt;/div&gt;
         &lt;div fz24 font-quaternary decoration&gt; 字体大小控制&lt;/div&gt;
         &lt;div fz32 font-quaternary&gt; 字体大小控制&lt;/div&gt;  


         &lt;div class="box-color"&gt;
           &lt;div class="case-color" mt20&gt;&lt;/div&gt;
         &lt;/div&gt;

         &lt;div class="box-color"&gt;
           &lt;div class="case-color" mb20&gt;&lt;/div&gt;
         &lt;/div&gt;

         &lt;div class="box-color"&gt;
           &lt;div class="case-color" ml20&gt;&lt;/div&gt;
         &lt;/div&gt;

         &lt;div class="box-color"&gt;
           &lt;div class="case-color" mr20&gt;&lt;/div&gt;
         &lt;/div&gt;

         &lt;div class="box-color" pt20&gt;
           &lt;div class="case-color"&gt;&lt;/div&gt;
         &lt;/div&gt;

         &lt;div class="box-color" pb20&gt;
           &lt;div class="case-color"&gt;&lt;/div&gt;
         &lt;/div&gt;

         &lt;div class="box-color" pl20&gt;
           &lt;div class="case-color"&gt;&lt;/div&gt;
         &lt;/div&gt;

         &lt;div class="box-color" pb20&gt;
           &lt;div class="case-color"&gt;&lt;/div&gt;
         &lt;/div&gt;


         &lt;div class="box-float" clearfix&gt;
           &lt;div class="case-float" fl&gt;&lt;/div&gt;
           &lt;div class="case-float" fr&gt;&lt;/div&gt;
         &lt;/div&gt;


        &lt;style lang="scss" scoped&gt;


            //盒边距
            .box-color{
              background: pink;
              margin: 10px ;
              display: inline-block;
            }
            .case-color{
              width: 50px;
              height: 50px;
              background: #409EFF;
              display: inline-block;
              color: white;
              vertical-align: top;
            }    

            //浮动
            .box-float{
              background: pink;
              margin: 10px ; 
            }

            .case-float{
              width: 50px;
              height: 50px;
              background: #409EFF;
              display: inline-block;
              color: white;
              vertical-align: top;
            }



        &lt;/style&gt;     

        </code>
    </pre>
      </div>
    </sky-code-panel>

  </div>
</template>

<script>
  import { inject } from "vue"

  export default {
    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
    setup () {
      const _ = inject("_")
      console.log(_.multiply(2, 9))

    },
  }
</script>


<style lang="scss" scoped>
.box-color {
  background: pink;
  margin: 10px;
  display: inline-block;
}
.case-color {
  width: 50px;
  height: 50px;
  background: #409eff;
  display: inline-block;
  color: white;
  vertical-align: top;
}

.box-float {
  background: pink;
  margin: 10px;
}

.case-float {
  width: 50px;
  height: 50px;
  background: #409eff;
  display: inline-block;
  color: white;
  vertical-align: top;
}
</style>